<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			let provinces=[]//表示所有的省份(将JSON文件获取到之后转换为这个数据)
			function init(){
				let xhr=new XMLHttpRequest()
				xhr.open("GET","city.json",false)
				xhr.send()
				let data=xhr.responseText//以纯文本的方式接收JSON串
				provinces=JSON.parse(data)//将JSON串转换为对象
				//将所有省的名字写到省的下拉列表中
				for(let i=0;i<provinces.length;i++){
					//将第i个省的名字,写入省下拉列表的第i项
					pro.options[i]=new Option(provinces[i].name)
				}
				for(let i=0;i<provinces[0].cities.length;i++){
					//将四川的第i个城市,写入城市的下拉列表的第i个选项中
					city.options[i]=new Option(provinces[0].cities[i])
				}
			}
				function changePro(){
					let k=pro.selectedIndex
					city.length=0
					for(let i=0;i<provinces[k].cities.length;i++){
						//将第k个省的第i个城市,写入城市的下拉列表的第i个选项中
						city.options[i]=new Option(provinces[k].cities[i])
					}
				}
		</script>
	</head>
	<body onload="init()">
		请选择:<select id="pro" onchange="changePro()">	</select>省
		<select id="city"></select>市
		<script type="text/javascript">
			const pro=document.getElementById("pro")
			const city=document.getElementById("city")
		</script>
	</body>
</html>
